<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>微信JS-SDK Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="style.css">
</head>

<body ontouchstart="">

    <button id="addPic">添加图片</button>
    <ul id="picList"></ul>


    <div class="wxapi_container">
        <div class="wxapi_index_container">
            <ul class="label_box lbox_close wxapi_index_list">
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-basic">基础接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-share">分享接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-image">图像接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-voice">音频接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-smart">智能接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-device">设备信息接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-location">地理位置接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-webview">界面操作接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-scan">微信扫一扫接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-shopping">微信小店接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-card">微信卡券接口</a>
                </li>
                <li class="label_item wxapi_index_item">
                    <a class="label_inner" href="#menu-pay">微信支付接口</a>
                </li>
            </ul>
        </div>
        <div class="lbox_close wxapi_form">
            <h3 id="menu-basic">基础接口</h3>
            <span class="desc">判断当前客户端是否支持指定JS接口</span>
            <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>

            <h3 id="menu-share">分享接口</h3>
            <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
            <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
            <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
            <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
            <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
            <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
            <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
            <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>

            <h3 id="menu-image">图像接口</h3>
            <span class="desc">拍照或从手机相册中选图接口</span>
            <button class="btn btn_primary" id="chooseImage">chooseImage</button>
            <span class="desc">预览图片接口</span>
            <button class="btn btn_primary" id="previewImage">previewImage</button>
            <span class="desc">上传图片接口</span>
            <button class="btn btn_primary" id="uploadImage">uploadImage</button>
            <span class="desc">下载图片接口</span>
            <button class="btn btn_primary" id="downloadImage">downloadImage</button>

            <h3 id="menu-voice">音频接口</h3>
            <span class="desc">开始录音接口</span>
            <button class="btn btn_primary" id="startRecord">startRecord</button>
            <span class="desc">停止录音接口</span>
            <button class="btn btn_primary" id="stopRecord">stopRecord</button>
            <span class="desc">播放语音接口</span>
            <button class="btn btn_primary" id="playVoice">playVoice</button>
            <span class="desc">暂停播放接口</span>
            <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
            <span class="desc">停止播放接口</span>
            <button class="btn btn_primary" id="stopVoice">stopVoice</button>
            <span class="desc">上传语音接口</span>
            <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
            <span class="desc">下载语音接口</span>
            <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>

            <h3 id="menu-smart">智能接口</h3>
            <span class="desc">识别音频并返回识别结果接口</span>
            <button class="btn btn_primary" id="translateVoice">translateVoice</button>

            <h3 id="menu-device">设备信息接口</h3>
            <span class="desc">获取网络状态接口</span>
            <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>

            <h3 id="menu-location">地理位置接口</h3>
            <span class="desc">使用微信内置地图查看位置接口</span>
            <button class="btn btn_primary" id="openLocation">openLocation</button>
            <span class="desc">获取地理位置接口</span>
            <button class="btn btn_primary" id="getLocation">getLocation</button>

            <h3 id="menu-webview">界面操作接口</h3>
            <span class="desc">隐藏右上角菜单接口</span>
            <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
            <span class="desc">显示右上角菜单接口</span>
            <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
            <span class="desc">关闭当前网页窗口接口</span>
            <button class="btn btn_primary" id="closeWindow">closeWindow</button>
            <span class="desc">批量隐藏功能按钮接口</span>
            <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
            <span class="desc">批量显示功能按钮接口</span>
            <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
            <span class="desc">隐藏所有非基础按钮接口</span>
            <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
            <span class="desc">显示所有功能按钮接口</span>
            <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>

            <h3 id="menu-scan">微信扫一扫</h3>
            <span class="desc">调起微信扫一扫接口</span>
            <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
            <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>

            <h3 id="menu-shopping">微信小店接口</h3>
            <span class="desc">跳转微信商品页接口</span>
            <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>

            <h3 id="menu-card">微信卡券接口</h3>
            <span class="desc">批量添加卡券接口</span>
            <button class="btn btn_primary" id="addCard">addCard</button>
            <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
            <button class="btn btn_primary" id="chooseCard">chooseCard</button>
            <span class="desc">查看微信卡包中的卡券接口</span>
            <button class="btn btn_primary" id="openCard">openCard</button>

            <h3 id="menu-pay">微信支付接口</h3>
            <span class="desc">发起一个微信支付请求</span>
            <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
        </div>
    </div>
</body>
<script src="jweixin-1.0.0.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 使用 jq 动态加载 微信配置


$.ajax({
    url: 'http://416973.dowei8.com:21119/getsignature' // 此处url请求地址需要替换成你自己实际项目中服务器数字签名服务地址
        ,
    type: 'post',
    data: {
        url: location.href.split('#')[0] // 将当前URL地址上传至服务器用于产生数字签名
    }
}).done(function(r) {
    // 返回了数字签名对象
    console.log(r);
    console.log(r.appid);
    console.log(r.timestamp);
    console.log(r.nonceStr);
    console.log(r.signature);

    // 开始配置微信JS-SDK
    wx.config({
        debug: true,
        appId: r.appId,
        timestamp: r.timestamp,
        nonceStr: r.nonceStr,
        signature: r.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'chooseImage'
        ]
    });

    // 调用微信API
    wx.ready(function() {
        var sdata = {
            title: '那年|测试微信分享及相关API',
            desc: '那年|测试微信分享及相关API',
            link: 'http://game.4gshu.com/deep-love/index2.html',
            imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg',
            success: function() {
                alert('用户确认分享后执行的回调函数');
            },
            cancel: function() {
                alert('用户取消分享后执行的回调函数');
            }
        };
        wx.onMenuShareTimeline(sdata);
        wx.onMenuShareAppMessage(sdata);
        // 添加图片
        $('#addPic').on('click', function() {
            wx.chooseImage({
                success: function(res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    // var imgs = localIds.split(',');
                    localIds.forEach(function(v, i) {
                        alert(v);
                        $('#picList').append('<li><img src="' + v + '" alt="" width="50"></li>');
                    });
                }
            });
        });
    });
});



//  使用 模版 生成页面

/*
            var obj = {
                debug: true,
                appId: '{{appId}}',
                timestamp: {{timestamp}},
                nonceStr: '{{nonceStr}}',
                signature: '{{signature}}',
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                ]
            };
            wx.config(obj);
*/
</script>
<script src="demo.js"></script>

</html>
